<template>
    <div class="container">
        <div class="order_item" v-for="order in orders" :key="order.id">
            <div class="header">
                <p class="create_time">订单时间：{{ order.created_at }}</p>
                <p class="status">{{ getStatus(order.status) }}</p>
            </div>
            <van-card v-for="goods in order.order_goods_infos" :num="goods.count"
                :price="((goods.goods_info.price || 0) / 100).toFixed(2)" :desc="goods.goods_info.detail_info"
                :title="goods.goods_info.name" :thumb="goods.goods_info.pic_url" />
            <div class="footer">
                <div v-if="order.status !== 1">
                    支付方式：{{ getPayType(order.pay_type) }}
                </div>
                <div>总金额：￥{{(order.price / 100).toFixed(2) }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, defineProps } from "vue";
import { orderList } from "@/api/order";

let orders = ref([]);

let props = defineProps({
    status: {
        type: Number,
    },
});

let getStatus = (status) => {
    switch (status) {
        case 1:
            return "待支付";
        case 2:
            return "待发货";
        case 3:
            return "待收货";
        case 4:
            return "待评价";
    }
}

let getPayType = (type) => {
    switch (type) {
        case 1:
            return "微信";
        case 2:
            return "支付宝";
        case 3:
            return "云闪付";
    }
}

// 组件挂载完成 自动查询 全部订单
onMounted(async () => {
    // status  从父组件 传递的 不同的值
    let res = await orderList({ page: 1, limit: 100, status: props.status });
    console.log(res);
    orders.value = res.data.list || [];
});
</script>

<style lang="scss" scoped>
.container {
    --van-card-background: #f0f0f0;

    .order_item {
        padding: 10px;
        margin: 10px;
        background: #fff;
        border-radius: 12px;

        .header {
            display: flex;
            justify-content: space-between;
            font-size: 12px;

            .create_time {
                color: #2f3640;
            }

            .status {
                color: #353b48;
            }
        }

        .goods_item {
            margin: 5px 0;
            background: #f0f0f0;
            border-radius: 10px;
        }

        .footer {
            font-size: 10px;
            color: #2f3640;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 2px;
        }
    }
}
</style>
